<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css_盒子的外边距_margin塌陷问题</title>
  <style>
/*      body{
          padding: 1px;
      }*/
      /*body{*/
      /*    border: 1px;*/
      /*}*/
      /*body{*/
      /*    overflow: hidden;*/
      /*}*/
      .box{
          width: 300px;
          height: 300px;
      }
      .box1{
          background-color: yellow;
          margin-top:200px;
      }
      .box2{
          background-color: teal;
          margin-bottom:50px;
      }
  </style>
</head>
<body>
<!--
      margin塌陷问题？
        概念：第一个子元素的上margin会作用在父元素上面,最后一个子元素的下margin会作用在父元素上面。
        举例：上面情况1，情况2就是这样的情况
        解决办法：
            方案一：给父元素设置不为0的padding
            方案二：给父元素设置不为0的border
            方案三：给父元素设置css样式overflow:hidden


-->
    <div class="box box1">这是div一号元素</div>
    <div class="box box2">这是div二号元素</div>

</body>
</html>